<template>
    <div class="activity-list">
        <div class="search-content">
            <el-input class="search-content-input" v-model="searchContent.activityName" placeholder="名称"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="activityList" border :height="oHeight">
                <el-table-column
                        align="center"
                        prop="sort"
                        label="排序"
                        min-width="60">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" @change="onChangeSort(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="id"
                        label="ID"
                        min-width="60">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="名称"
                        min-width="120"></el-table-column>
                <el-table-column
                        align="center"
                        label="活动时间"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                        <br>
                        至
                        <br>
                        <span>{{scope.row.endTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="isRecommended"
                        label="推荐"
                        min-width="60">
                    <template slot-scope="scope">
                        <el-switch
                                @change="switchUse(scope.row)"
                                v-model="scope.row.isRecommended == 2">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        min-width="90">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isPutawayed != 2">
                            <a class="btn-cell" href="javascript:;" @click="handleShowDrawer(scope.row.id)">编辑</a>
                            <span>&nbsp;|&nbsp;</span>
                            <a class="btn-cell" href="javascript:;" @click="changePutawayStatus(scope.row, 2)">上架</a>
                        </div>
                        <div v-else>
                            <a class="btn-cell" href="javascript:;" @click="changePutawayStatus(scope.row, 1)">下架</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <a class="btn-bottom" href="javascript:;" @click="handleShowDrawer">新增</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-drawer
                :before-close="handleCloseDrawer"
                :title="title"
                ref="elDrawer"
                :destroy-on-close="true"
                :append-to-body="true"
                size="85%"
                :visible.sync="drawer"
                :direction="direction">
            <financing-add-edit @addEditSuccess="search" @cancel="onCancel" :id="editedActivityId"></financing-add-edit>
        </el-drawer>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
	import FinancingAddEdit from './financing-add-edit';

	export default {
		data() {
			return {
				title: '',
				editedActivityId: 0,
				drawer: false,
				direction: 'rtl',
				oHeight: 800,
				searchContent: {
					activityName: '',
					currentPage: 1,
					pageSize: 10
				},
				activityList: [],
				total: 0
			}
		},
		computed: {

		},
		methods: {
			handleCloseDrawer(done) {
				this.editedActivityId = 0;
				this.drawer = false;
				done();
            },
			changePutawayStatus(activity, status) {
				this.$http.post('/admin/activity/index.php?act=finance_lease&op=fl_close', {
					fl_id: activity.id,
					state: status
				}).then(res => {
					if (res.code == 1) {
                        activity.isPutawayed = status;
					} else {
						alert(res.msg);
					}
				})
            },
			onChangeSort(activity) {
				this.$http.post('/admin/activity/index.php?act=finance_lease&op=fl_sort', {
					fl_id: activity.id,
					fl_sorts: activity.sort
				}).then(res => {
					if (res.code == 1) {

					} else {
						alert(res.msg);
					}
				})
            },
			switchUse(activity) {
				this.$http.post('/admin/activity/index.php?act=finance_lease&op=fl_update_recommend', {
					id: activity.id,
					fl_recommend: activity.isRecommended == 1 ? 2 : 1
				}).then(res => {
					if (res.code == 1) {
						activity.isRecommended = activity.isRecommended == 1 ? 2 : 1;
					} else {
						alert(res.msg);
					}
				})
			},
			onCancel() {
				this.$refs.elDrawer.closeDrawer()
			},
			handleShowDrawer(id) {
				if (typeof id == 'number') {
					this.editedActivityId = id;
					this.title = '编辑';
				} else {
					this.title = '新增';
				}
				this.drawer = true;
			},
			resetSearchData() {
				this.searchContent.activityName = '';
			},
			search(page) {
				if (typeof page == 'number') {
					this.searchContent.currentPage = page;
				} else {
					this.searchContent.currentPage = 1;
                }
				this.getListData();
			},
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
				const data = {};
				data.currentPage = this.searchContent.currentPage;
				data.eachNum = this.searchContent.pageSize;
				data.fl_title_name = this.searchContent.activityName;
				this.$http.post('/admin/activity/index.php?act=finance_lease&op=fl_list', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list.length) {
							this.activityList = res.data.list.map(item => {
								return {
									sort: item.fl_sort * 1,
									id: item.fl_id * 1,
									name: item.fl_title_name,
									startTime: item.fl_start_time * 1000,
									endTime: item.fl_end_time * 1000,
									isRecommended: item.fl_recommend * 1,
									isPutawayed: item.fl_open * 1
								}
							});
							this.total = parseInt(res.data.totalNum);
						} else {
							this.activityList = [];
							this.total = 0;
						}
					}
					else if (res.code == 1000) {
						this.activityList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			}
		},
		mounted() {
			resize(this)
		},
		created() {
			this.getListData();
		},
		components: {
			FinancingAddEdit
		},
		name: "activity-list"
	}
</script>

<style lang="scss" scoped>
    .search-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        &-input {
            width: 200px;
        }
        .time-range-wrapper {
            .time-range-label {
                font-size: 14px;
            }
            display: flex;
            align-items: center;
            /deep/.el-range-separator {
                box-sizing: content-box;
            }
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
    .btn-bottom + .btn-bottom {
        margin-left: 15px;
    }
    .btn-cell {
        color: #409eff;
        cursor: pointer;
    }
    .preview-wrapper {
        width: 25px;
        height: 25px;
        position: relative;
        display: flex;
        cursor: pointer;
    }
    .preview-wrapper>img {
        width: 25px;
        height: 25px;
    }
    .preview-wrapper>.preview {
        position: absolute;
        left: 0;
        top: 100%;
        display: none;
        background: #FFF;
        padding: 5px;
        border: solid 5px #71CBEF;
        z-index: 1000;
    }
    .preview-wrapper:hover>.preview {
        display: flex;
    }
    /deep/ .el-drawer.rtl {
        overflow-y: auto;
        top: 50px;
        height: auto;
    }
    /deep/ .el-table .cell {
        overflow: visible;
    }
    .search-list {
        /deep/ .el-input.el-input--mini {
            width: 60px;
        }
    }
</style>
